<template>
    <van-nav-bar left-text="" left-arrow @click-left="goBack" @click-right="isSearch = !isSearch">
        <template #right>
            <van-icon name="search" size="18" />
        </template>
        <template #title>
            <van-field v-if="isSearch" v-model="keywords" placeholder="请输入商品名称" @update:model-value="getProductData" />
            <span v-else>全部分类</span>
        </template>
    </van-nav-bar>

    <!-- 菜单 -->
    <van-dropdown-menu swipe-threshold="4">
        <van-dropdown-item v-model="typeid" :options="typelist" @change="getProductData"/>
        <van-dropdown-item v-model="flag" :options="flaglsit"  @change="getProductData"/>
        <van-dropdown-item v-model="order" :options="orderlist"  @change="getProductData"/>
        <van-dropdown-item v-model="sort" :options="sortlist"  @change="getProductData"/>
    </van-dropdown-menu>

    <div class="mainWarp" style="background:#f3f3f3">
        <ul class="proul">
            <li v-for="item in list" :key="item.id">
                <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
                    <img :src="item.thumbs_text" />
                </router-link>
                <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
                    <p class="tit">{{ item.name }}</p>
                </router-link>
                <div class="price">
                    <p>￥{{ item.price }}</p>
                </div>
            </li>
        </ul>
    </div>
    <Footer />
</template>

<script setup>
import Footer from '@/components/common/footer.vue';
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.push('/') }
const isSearch = ref(false)
const keywords = ref('')

const typeid = ref(0)
const typelist = ref([]);
const flag = ref(0)
const flaglsit = [
    { text: '全部商品', value: 0 },
    { text: '新品', value: 1 },
    { text: '热销', value: 2 },
    { text: '推荐', value: 3 },
]
const order = ref('createtime')
const orderlist = [
    { text: '上架时间', value: 'createtime' },
    { text: '价格', value: 'price' },
    { text: '库存', value: 'stock' },
]
const sort = ref('desc');
const sortlist = [
    { text: '降序', value: 'desc' },
    { text: '升序', value: 'asc' },
]

const list = ref([])

onBeforeMount(() => {
    getProductData()
    getTypeData()
})

let getProductData = async () => {
    let data = {
        keywords: keywords.value,
        typeid: typeid.value,
        flag: flag.value,
        order: order.value,
        sort: sort.value
    }
    let result = await Api.ProductLists(data)
    if (result.code == 1) {
        list.value = result.data
    }
}

const getTypeData = async () => {
    let result = await Api.ProductType()
    if (result.code == 1) {
        typelist.value = result.data
        typelist.value.unshift({
            text: '全部分类',
            value: 0
        })
    }
}
</script>
